<script lang="ts" setup>
import { ref, reactive } from "vue";
import {goHouseholdManagement} from "../../tools/go"
import { get, set,getHouseHold,getUserId } from "../../store"
import {toast} from "../../components/popup/popup";
import UniPopup from "../../uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
import BHeader from "../../components/header/bHeader.vue";
import {createHouse, updateHouse} from "../../api/house/house";

const title = ref("编辑房屋信息")

// 表单数据
const formData = reactive({
  id: "",
  householdId: getHouseHold(),
  householdLocal: "",
  houseName: "",
  houseRmake: "",
  updateBy: getUserId(),
  updateTime: "",
});

// 住户列表数据
const householdList = ref([
  { id: "1", name: "张三家庭" },
  { id: "2", name: "李四家庭" },
  { id: "3", name: "王五家庭" },
]);

// 控制住户选择弹窗显示
const showHouseholdPicker = ref(false);

// 提交状态
const isSubmitting = ref(false);

// 选择住户
const selectHousehold = (item: { id: string; name: string }) => {
  formData.householdId = item.name;
};

// 返回上一页
const handleBack = () => {
  goHouseholdManagement()
  set("curHouse",null)
};

// 处理弹窗状态变化
const handlePopupChange = (e: { show: boolean }) => {
  showHouseholdPicker.value = e.show;
};


// 提交表单
const handleSubmit = async () => {
  // 表单验证
  if (!formData.householdLocal) {
    toast("请输入房屋位置", "none")
    return;
  }
  if (!formData.houseName) {
    toast("请输入房屋名称", "none")
    return;
  }
  if (title.value === "编辑房屋信息") {
    try {
      isSubmitting.value = true;
      // 修改
      updateHouse(formData).then(res => {
        console.log(res)
        if (res.code === 200) {
          handleBack()
        }
      })
    } catch (error) {
      toast("保存失败", "error")
    } finally {
      isSubmitting.value = false;
    }
  } else {
    try {
      isSubmitting.value = true;
      // 提交
      createHouse(formData).then(res => {
        console.log(res)
        if (res.code === 200) {
          handleBack()
        }
      })
    } catch (error) {
      toast("新增失败", "error")
    } finally {
      isSubmitting.value = false;
    }
  }

};

const init = () => {
  let curHouse = get()["curHouse"];
  if (curHouse == null) {
    title.value = "新增房屋"
  }

  Object.assign(formData, curHouse)


}

init()

</script>


<template>
  <view class="back">
    <view class="page-container">
      <!-- 标题栏 -->
      <b-header :title="title" @click="handleBack">

      </b-header>

      <!-- 表单区域 -->
      <scroll-view class="form-container" scroll-y>
        <view class="form-item">
          <text class="label">房屋ID</text>
          <input
              class="input disabled"
              type="text"
              :value="formData.id"
              disabled
          />
        </view>


        <view class="form-item">
          <text class="label required">房屋位置</text>
          <input
              class="input"
              type="text"
              v-model="formData.householdLocal"
              placeholder="请输入房屋位置"
          />
        </view>

        <view class="form-item">
          <text class="label required">房屋名称</text>
          <input
              class="input"
              type="text"
              v-model="formData.houseName"
              placeholder="请输入房屋名称"
          />
        </view>

        <view class="form-item">
          <text class="label">房屋备注</text>
          <textarea
              class="textarea"
              v-model="formData.houseRmake"
              placeholder="请输入房屋备注信息"
          />
        </view>

        <view class="form-item">
          <text class="label">更新者</text>
          <input
              class="input disabled"
              type="text"
              :value="formData.updateBy"
              disabled
          />
        </view>

        <view class="form-item">
          <text class="label">更新时间</text>
          <input
              class="input disabled"
              type="text"
              :value="formData.updateTime"
              disabled
          />
        </view>
      </scroll-view>

      <!-- 底部按钮 -->
      <view class="footer">
        <button class="btn btn-cancel" @click="handleBack">取消</button>
        <button
            class="btn btn-submit"
            @click="handleSubmit"
            :loading="isSubmitting"
        >
          {{ title === "编辑房屋信息" ? "保存" : "保存"}}
        </button>
      </view>

      <!-- 住户选择弹窗 -->
      <uni-popup ref="popup" type="bottom" @change="handlePopupChange">
        <view class="popup-content">
          <view class="popup-header">
            <text class="popup-title">选择住户</text>
            <uni-icons
                type="closeempty"
                size="20"
                @click="showHouseholdPicker = false"
            />
          </view>
          <scroll-view class="popup-list" scroll-y>
            <view
                v-for="item in householdList"
                :key="item.id"
                class="popup-item"
                @click="selectHousehold(item)"
            >
              <text>{{ item.name }}</text>
            </view>
          </scroll-view>
        </view>
      </uni-popup>
    </view>
  </view>

</template>


<style scoped lang="scss">
@use "../../static/css/main";
.back{
  @include main.useTheme() {

    .page-container {
      min-height: 100vh;
      height: 100%;
      display: flex;
      flex-direction: column;
      background-color: main.getVal("primary_bg_color");
      box-shadow: 0 4rpx 12rpx rgba(main.getVal("primary_border_color"), 0.1);
    }

    .header {
      position: relative;
      height: 88rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: main.getVal("two_lv_bg_color");
      border-bottom: 1px solid main.getVal("primary_border_color");
      box-shadow: 0 4rpx 12rpx rgba(main.getVal("primary_border_color"), 0.2);
    }

    .back-icon {
      position: absolute;
      left: 30rpx;
    }

    .title {
      font-size: 16px;
      font-weight: 500;
      color: main.getVal("primary_text_color");
    }

    .form-container {
      flex: 1;
      padding: 30rpx;
      overflow: auto;
      box-shadow: 0 4rpx 12rpx rgba(main.getVal("primary_border_color"), 0.1);
    }

    .form-item {
      margin-bottom: 40rpx;
      background-color: main.getVal("one_lv_bg_color");
      border-radius: 8px;
      padding: 20rpx;
      box-shadow: 0 4rpx 12rpx rgba(main.getVal("primary_border_color"), 0.1);
    }

    .label {
      display: block;
      font-size: 14px;
      color: main.getVal("primary_text_color");
      margin-bottom: 20rpx;
    }

    .required::before {
      content: "*";
      color: main.getVal("pri_color");
      margin-right: 8rpx;
    }

    .input {
      width: 100%;
      height: 80rpx;
      padding: 0 20rpx;
      font-size: 14px;
      color: main.getVal("two_lv_text_color");
      background-color: main.getVal("two_lv_bg_color");
      border-radius: 4px;
    }

    .disabled {
      background-color: main.getVal("primary_border_color");
      color: main.getVal("other_lv_text_color");
    }

    .select-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 80rpx;
      padding: 0 20rpx;
      background-color: main.getVal("two_lv_bg_color");
      border-radius: 4px;
    }

    .select-text {
      font-size: 14px;
      color: main.getVal("two_lv_text_color");
    }

    .textarea {
      width: 100%;
      height: 160rpx;
      padding: 20rpx;
      font-size: 14px;
      color: main.getVal("two_lv_text_color");
      background-color: main.getVal("two_lv_bg_color");
      border-radius: 4px;
    }

    .footer {
      padding: 20rpx 30rpx;
      display: flex;
      justify-content: space-between;
      background-color: main.getVal("one_lv_bg_color");
      border-top: 1px solid main.getVal("primary_border_color");
      box-shadow: 0 -4rpx 12rpx rgba(main.getVal("primary_border_color"), 0.1);
    }

    .btn {
      width: 320rpx;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      border-radius: 4px;
      font-size: 14px;
      transition: box-shadow 0.2s;
      
      &:active {
        box-shadow: 0 4rpx 12rpx rgba(main.getVal("primary_border_color"), 0.15);
      }
    }

    .btn-cancel {
      color: main.getVal("other_lv_text_color");
      background-color: main.getVal("primary_border_color");
      box-shadow: 0 4rpx 12rpx rgba(main.getVal("primary_border_color"), 0.1);
    }

    .btn-submit {
      color: main.getVal("primary_text_color");
      background-color: main.getVal("pri_color");
      box-shadow: 0 6rpx 16rpx rgba(main.getVal("pri_color"), 0.3);
    }



    .popup-content {
      background-color: main.getVal("one_lv_bg_color");
      border-top-left-radius: 16px;
      border-top-right-radius: 16px;
      box-shadow: 0 -4rpx 24rpx rgba(main.getVal("primary_border_color"), 0.2);
    }
    .popup-header {
      height: 88rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 30rpx;
      border-bottom: 1px solid main.getVal("primary_border_color");
    }

    .popup-title {
      font-size: 16px;
      font-weight: 500;
      color: main.getVal("primary_text_color");
    }

    .popup-list {
      max-height: 600rpx;
      padding: 20rpx 0;
    }

    .popup-item {
      height: 88rpx;
      display: flex;
      align-items: center;
      padding: 0 30rpx;
      font-size: 14px;
      color: main.getVal("one_lv_text_color");
      box-shadow: 0 2rpx 6rpx rgba(main.getVal("primary_border_color"), 0.1);
    }

    .popup-item:active {
      background-color: main.getVal("primary_border_color");
    }
  }
}

</style>
